<template>
  <div>
    <city-header/>
    <search :cities="cities"/>
    <list :cities="cities" :hot="hotCities" :letter="letter"/>
    <alphabet :cities="cities" @change="handleLetterChange"/>
  </div>
</template>
<script>
  import CityHeader from './components/Header'
  import Search from './components/Search'
  import List from './components/List'
  import Alphabet from './components/Alphabet'

  import axios from 'axios'
  export default {
    components: {
      CityHeader,
      Search,
      List,
      Alphabet
    },
    data() {
      return {
        cities: {},
        hotCities: [],
        letter: ''
      }
    },
    mounted() {
      this.getCityInfo()
    },
    methods: {
      getCityInfo() {
        axios.get('/api/city.json')
          .then(this.handleGetCityInfoSucc)
      },
      handleGetCityInfoSucc(res) {
        /*console.log(res)*/
        res = res.data
        if(res.ret && res.data) {
          const data = res.data
          this.cities = data.cities
          this.hotCities = data.hotCities
        }
      },
      handleLetterChange(letter) {
        this.letter = letter
      }
    }
  }
</script>

<style scoped lang="stylus">

</style>
